<template>
    <div class="collect">
          <div class="head">
            <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
             我的收藏
        </div>
          <p v-if="list.length==0"> <van-empty description="暂无收藏" /></p>
        <div class="list" v-for="(item,index) in list" :key="index">
            <h1 style="font-size:18px">{{item.title}}</h1>
            <p>{{item.end_play_date|timers}}~{{item.start_play_date|timers}}|共{{item.section_num}}课时</p>
           
            <img :src="item.teachersAvatar" alt=""><span>{{item.teachers}}</span>
             <hr/>
             <p>共{{item.sales_num}}个人报名</p>
             <span class="xing" @click="xiao(item.collect_id)"><van-icon name="star" color='orange'/></span>
             <span class="qian">{{item.price}}</span>
        </div>
    </div>
</template>
<script>
import {guanye,shx} from '../../Request/http'
export default {
    name: 'XueCollect',
    data() {
        return {
            list:[],
            collect_id:0
        };
    },
    mounted() {
        guanye({page:1,limit:10,type:1}).then((res)=>{
            console.log(res)
            this.list=res.list
            // this.collect_id=res.list.collect_id
            // // console.log(this.collect_id)
            // console.log(this.list.collect_id)
        })
    },
    methods: {
        xiao(collect_id){
            console.log(collect_id)
            shx(collect_id).then((res)=>{
                console.log(res)
                guanye({page:1,limit:10,type:1}).then((res)=>{
            console.log(res)
            this.list=res.list
            this.collect_id=res.list.collect_id
            console.log(this.list)
        })
            })
        }
    },
};
</script>
<style lang="scss" scoped>
 .head{
        width: 100%;
        line-height: 50px;
        text-align: center;
        position: relative;
        background:#ffff;
        font-size:18px;
        .icon-fanhui{
            position: absolute;
            top:0;
            left: 20px;
        }
        span{
            position: absolute;
            top: 0px;
            right: 20px;
        }
 }
   .collect{
       width: 100%;
       height: 100%;
       background:rgb(238, 236, 236);
      
         .list{
              padding: 0 20px;
       box-sizing:border-box;
     position: relative;
     background:#fff;
     margin-top:20px;
     padding: 20px;
     font-size:14px;
     line-height: 30px;
     border-radius:20px;
     .xing{
         position: absolute;
         top:10px;
         right: 20px;
     }
     .qian{
         position: absolute;
         bottom:10px;
         right: 20px;
     }
   

 }
     }
 
</style>